<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="1" style="color:red" onclick="show1()" id="btn1" />
<input type="button" value="2" onclick="show2()" id="btn2" />
<input type="button" value="3" onclick="show3()" id="btn3"/>
<input type="button" value="4" onclick="show4()" id="btn4"/>
<input type="button" value="5" onclick="show5()" id="btn5"/>
<hr/>
<img src="1.webp" id="pic" width="400"/>
</body>
<script>
    function show2(){
        pic.src = "2.webp";
        btn1.style.color = "";
        btn3.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "";
        btn2.style.color = "red";
    }

    function show1(){
        pic.src = "1.webp";
        btn2.style.color = "";
        btn3.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "";
        btn1.style.color = "red";
    }
    function show3(){
        pic.src = "3.webp";
        btn1.style.color = "";
        btn2.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "";
        btn3.style.color = "red";
    }
    function show4(){
        pic.src = "4.webp";
        btn1.style.color = "";
        btn2.style.color = "";
        btn3.style.color = "";
        btn5.style.color = "";
        btn4.style.color = "red";
    }
    function show5(){
        pic.src = "5.webp";
        btn1.style.color = "";
        btn2.style.color = "";
        btn3.style.color = "";
        btn4.style.color = "";
        btn5.style.color = "red";
    }
</script>
</html>